<template>
    <div class="container">
      <nav-bar></nav-bar>
      <div class="item-box">
        <div class="search-box">
          <div class="left-box">
            <pub-area
            :maxSelectLevel="3"
            @change="changeArea"
            customRightIcon
            label=""
            :isLink="false"
            valueIsLast
            ></pub-area>
          </div>
          <div class="right-box" v-show="useUserStore().orgInfo.level <= 2">
            <div class="text" @click="toDataView">区域分布情况</div>
          </div>
        </div>
        <div class="content-box">
          <div class="left-img">
            <img src="../../../assets/img/view/sqjjylfwsszs.png" alt="" />
          </div>
          <div class="label">社区居家养老服务设施总数（个）</div>
          <div class="value">
            <count-to
              :startVal="0"
              :endVal="Number(state.info.total)"
              :decimals="0"
              :duration="2000"
            ></count-to>
          </div>
        </div>
      </div>
      <div class="item-box">
        <div class="title-box2">
          <div class="left-title">社区居家养老服务设施类别</div>
        </div>
        <div class="chart-box" ref="chart"></div>
      </div>
      <div class="item-box">
        <div class="title-box2">
          <div class="left-title">关键数据一览</div>
        </div>
        <ul class="content-item-box">
          <li>
            <div class="item-left-img">
              <img src="../../../assets/img/view/chxddjg.png" alt="" />
            </div>
            <div class="item-text">长护险定点机构（个）</div>
            <div class="item-value">
              <count-to
                :startVal="0"
                :endVal="Number(state.info.fixPoint)"
                :decimals="0"
                :duration="2000"
              ></count-to>
            </div>
          </li>
          <li>
            <div class="item-left-img">
              <img src="../../../assets/img/view/yyjhjgs.png" alt="" />
            </div>
            <div class="item-text">医养结合机构数（个）</div>
            <div class="item-value">
              <count-to
                :startVal="0"
                :endVal="Number(state.info.medical)"
                :decimals="0"
                :duration="2000"
              ></count-to>
            </div>
          </li>
          <li>
            <div class="item-left-img">
              <img src="../../../assets/img/view/qyxylfwzx.png" alt="" />
            </div>
            <div class="item-text">区域性养老服务中心（个）</div>
            <div class="item-value">
              <count-to
                :startVal="0"
                :endVal="Number(state.info.area)"
                :decimals="0"
                :duration="2000"
              ></count-to>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onBeforeMount, onMounted,inject } from 'vue'
  import { getSQJJYLFWXMSS } from '@/api/xcc'
  import router from '@/router/index'
  import { useUserStore } from '@/pinia/modules/user'
  import { useRouter } from 'vue-router'
  import { CountTo } from 'vue3-count-to'
  import * as echarts from 'echarts'

  var option
  const chart = ref()
  const state = reactive({
    info: {},
    form: {
      areaCode: useUserStore().userLastArea
    }
  })
  
  const changeComponents = inject('changeComponents')

  const initChart = data => {
    let chartDom = chart.value
    let totalNum = data.type1 + data.type2 + data.type3 + data.type4
    var myChart = echarts.init(chartDom)
    option = {
      title: {
        // x:
        //   totalNum >= 10 && totalNum <= 99
        //     ? '36%'
        //     : totalNum < 10
        //     ? '37%'
        //     : totalNum > 99 && totalNum <= 999
        //     ? '34%'
        //     : '33%', //X坐标
        // y: '39%', //Y坐标
        // subtext: totalNum, //副标题
        // subtextStyle: {
        //   //副标题样式
        //   fontSize: 20,
        //   fontWeight: 'bolder',
        //   color: '#333'
        // }
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        right: '3%',
        top: 'center',
        width: '100'
        //   left: 'center'
      },
      series: [
        {
          name: '设施类别',
          type: 'pie',
          radius: ['30%', '50%'],
          center: ['40%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: true,
            formatter: '{d}%',
            fontSize: 15
          },
          itemStyle: {
            borderRadius: 0,
            borderColor: '#fff',
            borderWidth: 5
          },
          data: [
            { value: data.type1, name: '全托服务' },
            { value: data.type2, name: '日间照料' },
            { value: data.type3, name: '互助型' },
            { value: data.type4, name: '其他' }
          ],
          emphasis: {
            scale: true, //是否开启高亮后扇区的放大效果。
            scaleSize: 15 //高亮后扇区的放大尺寸，在开启 emphasis.scale 后有效。
          }
        }
      ],
      backgroundColor: '#fff',
      color: ['#2E65FD', '#76C15C', '#FEC02A', '#EE6565']
    }
  
    option && myChart.setOption(option)
    myChart.dispatchAction({
      type: 'highlight',
      name: '全托服务' //可以通过name指定，或者数据项的 index
    })
  }
  
  const changeArea = val => {
    state.form.areaCode = val
    getData()
  }
  
  const toDataView = ()=>{
    changeComponents('dataView')
  }
  
  const getData = async () => {
    let res = await getSQJJYLFWXMSS(state.form)
    if (res.succeed) {
      state.info = res.data
      initChart(res.data)
    }
  }
  


  onMounted(() => {
    getData()
  })
  onBeforeMount(() => {})
  </script>
  <style lang="less" scoped>
  .container {
    background-color: #f8f8f8;
    padding-top: 20px;
    .item-box {
      background-color: #fff;
      .search-box {
        display: flex;
        height: 90px;
        width: 100%;
        border-bottom: 1px solid #e6e6e6;
        justify-content: space-between;
        .left-box {
          height: 100%;
          :deep(.van-cell) {
            width: 220px;
            height: 100%;
            input {
              // max-width: 400px;
            }
          }
        }
        .right-box {
          height: 100%;
          margin-right: 40px;
          .text {
            line-height: 90px;
            font-size: 30px;
            font-weight: 400;
            color: #4375e4;
          }
        }
      }
      .content-box {
        padding: 30px 40px;
        display: flex;
        align-items: center;
        .left-img {
          width: 97px;
          height: 97px;
          img {
            width: 97px;
            height: 97px;
          }
        }
        .label {
          margin-left: 20px;
          font-size: 24px;
          font-family: PingFang SC;
          color: #333333;
        }
        .value {
          text-align: right;
          flex: 1;
          font-size: 36px;
          font-family: PingFang SC;
          color: #333333;
        }
      }
      .title-box2 {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        padding: 0px 40px;
        height: 90px;
        border-bottom: 1px solid #e6e6e6;
        .left-title {
          font-family: Microsoft YaHei;
          color: #000000;
          line-height: 90px;
          font-size: 30px;
          font-weight: bold;
        }
        .right-title {
          font-size: 24px;
          font-weight: 500;
          color: #999999;
        }
      }
      .content-item-box {
        li {
          margin: 0 40px;
          display: flex;
          height: 110px;
          align-items: center;
          border-bottom: 2px dashed #959595;
          &:last-child {
            border-bottom: none;
          }
          .item-left-img {
            img {
              width: 51px;
            }
          }
          .item-text {
            margin-left: 20px;
            font-size: 24px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #000000;
          }
          .item-value {
            flex: 1;
            text-align: right;
            font-size: 36px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #000000;
          }
        }
      }
      .chart-box {
        height: 450px;
      }
    }
  }
  </style>
  